<template>
	<view>
		<view v-for="(item, index) in list" :key="index" class="item" @click="itemClick(item)">
			<view style="width: 64rpx;height: 64rpx">
				<u-image width="64rpx" height="64rpx" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/faq_q.png"></u-image>
			</view>
			<text class="answer">{{item.question}}</text>
			<text>{{courseStatus(item.state)}}</text>
		</view>
		<u-loadmore :status="status" />
		<fab  @fabClick="fabClick"></fab>
	</view>
</template>

<script>
	import {
		getPageByStaffId
	} from '@/api/clientele.js'
	import {
		mapState
	} from 'vuex';
	import Fab from '@/components/fab.vue'
	export default {
		components: {
			Fab
		},
		data() {
			return {
				status: 'loadmore',
				page: -1,
				list: [],
			}
		},
		computed: {
			...mapState({
				area: state => state.user.tchInfo.area,
			})
		},
		onLoad() {
			this.getMyFaq(this.page);
		},
		methods: {
			getMyFaq(page) {
				getPageByStaffId(this.area.id, page + 1, 10).then(res => {
					console.log(res);
					if (res.data.last) {
						this.status = 'nomore';
					}
					this.page = res.data.number;
					if (this.page === 0) {
						this.list = res.data.content;
					} else {
						this.list = this.list.concat(res.data.content);
					}
				})
			},

			itemClick(item) {
				this.$u.route({
					url: 'pages_operate/clientele/faq-detail-page',
					params: item,
				})
			},

			loadMore() {
				if (this.status === 'nomore') {
					return;
				}
				this.status = 'loading';
				this.getMyFaq(this.page);
			},

			onReachBottom() {
				this.loadMore();
			},

			courseStatus(state) {
				if (state == 0) {
					return '待审核';
				} else if (state == 1) {
					return '已通过';
				} else {
					return '已拒绝';
				}
			},
			
			fabClick() {
				let that = this;
				uni.navigateTo({
					url: '/pages_operate/clientele/faq-add-page',
					events: {
						//发布成功
						pushSuccessEvent: function(data) {
							console.log(data);
							that.getMyFaq(-1);
						},
					},
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}

	.item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx;
		margin: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: $app-font-color;

		.answer {
			flex-grow: 1;
			margin-left: 20rpx;
		}
	}
</style>
